/**
 * 视频按钮组件
 * 以按钮网格形式显示视频选择器
 */

import React, { useRef } from 'react'
import './VideoButtons.css'

export interface VideoItem {
  id: string
  name: string
  url: string
  duration?: string
  thumbnail?: string
  description?: string
  size?: string
}

interface VideoButtonsProps {
  videos: VideoItem[]
  currentVideoId?: string
  onVideoSelect: (video: VideoItem) => void
  onVideoUpload?: (file: File) => void
  onRefresh?: () => void
  className?: string
  isLoading?: boolean
}

const VideoButtons: React.FC<VideoButtonsProps> = ({
  videos,
  currentVideoId,
  onVideoSelect,
  onVideoUpload,
  onRefresh,
  className = '',
  isLoading = false
}) => {
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleVideoClick = (video: VideoItem) => {
    onVideoSelect(video)
  }

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file && file.type.startsWith('video/')) {
      onVideoUpload?.(file)
    }
  }

  const handleUploadClick = () => {
    fileInputRef.current?.click()
  }

  // 按类型分组视频
  const localVideos = videos.filter(v => v.url.startsWith('/videos/'))
  const uploadedVideos = videos.filter(v => v.url.startsWith('blob:'))

  if (isLoading) {
    return (
      <div className={`video-buttons loading ${className}`}>
        <div className="loading-spinner">
          <div className="spinner"></div>
          <span>加载视频中...</span>
        </div>
      </div>
    )
  }

  return (
    <div className={`video-buttons ${className}`}>
      {/* 头部信息 */}
      <div className="video-header">
        <div className="header-info">
          <h3>📁 视频库</h3>
          <span className="video-count">{videos.length} 个视频</span>
        </div>
        {onRefresh && (
          <button 
            className="refresh-btn" 
            onClick={onRefresh}
            title="刷新视频列表"
          >
            🔄 刷新
          </button>
        )}
      </div>

      {/* 本地视频按钮 */}
      {localVideos.length > 0 && (
        <div className="video-section">
          <h4>📂 本地视频</h4>
          <div className="video-grid">
            {localVideos.map(video => (
              <button
                key={`local-${video.id}`}
                className={`video-btn ${video.id === currentVideoId ? 'active' : ''}`}
                onClick={() => handleVideoClick(video)}
                title={`${video.name}${video.duration ? ` (${video.duration})` : ''}${video.size ? ` - ${video.size}` : ''}`}
              >
                <div className="video-thumbnail">
                  {video.thumbnail ? (
                    <img src={video.thumbnail} alt={video.name} />
                  ) : (
                    <div className="thumbnail-placeholder">🎬</div>
                  )}
                  {video.id === currentVideoId && (
                    <div className="playing-indicator">▶</div>
                  )}
                </div>
                <div className="video-info">
                  <div className="video-name">{video.name}</div>
                  <div className="video-meta">
                    {video.duration && <span>{video.duration}</span>}
                    {video.size && <span>{video.size}</span>}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* 上传的视频按钮 */}
      {uploadedVideos.length > 0 && (
        <div className="video-section">
          <h4>☁️ 上传的视频</h4>
          <div className="video-grid">
            {uploadedVideos.map(video => (
              <button
                key={`uploaded-${video.id}`}
                className={`video-btn ${video.id === currentVideoId ? 'active' : ''}`}
                onClick={() => handleVideoClick(video)}
                title={`${video.name}${video.duration ? ` (${video.duration})` : ''}${video.size ? ` - ${video.size}` : ''}`}
              >
                <div className="video-thumbnail">
                  {video.thumbnail ? (
                    <img src={video.thumbnail} alt={video.name} />
                  ) : (
                    <div className="thumbnail-placeholder">🎬</div>
                  )}
                  {video.id === currentVideoId && (
                    <div className="playing-indicator">▶</div>
                  )}
                </div>
                <div className="video-info">
                  <div className="video-name">{video.name}</div>
                  <div className="video-meta">
                    {video.duration && <span>{video.duration}</span>}
                    {video.size && <span>{video.size}</span>}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* 上传按钮 */}
      {onVideoUpload && (
        <div className="video-section">
          <h4>📤 上传视频</h4>
          <button
            className="upload-btn"
            onClick={handleUploadClick}
          >
            <div className="upload-icon">📁</div>
            <div className="upload-text">
              <div className="primary-text">点击上传视频</div>
              <div className="secondary-text">支持 MP4, WebM, AVI, MOV 等格式</div>
            </div>
          </button>
          <input
            ref={fileInputRef}
            type="file"
            accept="video/*"
            onChange={handleFileSelect}
            style={{ display: 'none' }}
          />
        </div>
      )}

      {/* 空状态 */}
      {videos.length === 0 && (
        <div className="empty-state">
          <div className="empty-icon">📁</div>
          <div className="empty-text">
            <div>暂无视频文件</div>
            <div>请将视频文件放入 public/videos/ 文件夹</div>
          </div>
        </div>
      )}
    </div>
  )
}

export default VideoButtons
